<template>
	<div>
		<ul>
			<li v-for="(message, index) in messages" :key="message.id">
				<!-- ES6语法拼串 -->
				<router-link :to="`/home/message/detail/${message.id}`">{{message.title}}</router-link>
				<!-- ES6之前 -->
				<!-- <router-link :to="`/home/message/detail?id=${message.id}`">{{message.title}}</router-link> -->
				
				<button @click="pushShow(message.id)">push</button>
				<button @click="replaceShow(message.id)">replace</button>
			</li>
		</ul>
		<button @click="$router.back()">回退</button>
		<router-view></router-view>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				messages:[]
			}
		},
		mounted() {
			// 模拟ajax从后台获取数据
			setTimeout(() => {
				const messages = [
					{id:1, title:'message001'},
					{id:2, title:'message002'},
					{id:3, title:'message003'},
					{id:4, title:'message004'},
					{id:5, title:'message005'},
					{id:6, title:'message006'}
				];
				this.messages = messages;
			}, 1000);
		},
		methods:{
			pushShow(id) {
				this.$router.push(`/home/message/detail/${id}`);
			},
			replaceShow(id) {
				// 用新路由替换当前路由(不可以返回到当前路由界面)
				this.$router.replace(`/home/message/detail/${id}`);
			}
			
		}
	}
</script>

<style>
</style>
